<div style="position:fixed;width: 100%; z-index: 1000;background-color: #f2f2f2; top: 51px" autocomplete="off" novalidate="novalidate">

  <div style="display:flex;">
    <div style="padding-top: 3px;">
      <mat-icon style="padding-top: 3px;">add_circle</mat-icon>
      <h4 style="display: inline;position: relative;top: -5px;">
        <ng-container i18n="services.form.header.page.editService">
          {{ messages.services_form_header_page_editService }}
        </ng-container>
      </h4>
    </div>
    <div style="flex: 1 1 auto"></div>
    <div>
      <app-controls (save)="save()"></app-controls>
    </div>
  </div>

  <mat-tab-group #tabGroup (selectedIndexChange)="goto($event)">
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Basics</ng-container>
      </ng-template>
    </mat-tab>
    <!--
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Service Type</ng-container>
      </ng-template>
    </mat-tab>
    -->
    <mat-tab *ngIf="isSaml() || isOauth() || isOidc() || isWsFed()">
      <ng-template mat-tab-label>
        <ng-container *ngIf="isSaml()" i18n>SAML2 SP</ng-container>
        <ng-container i18n *ngIf="isOauth()">OAuth2</ng-container>
        <ng-container *ngIf="isOidc()" i18n>OpenID Connect</ng-container>
        <ng-container *ngIf="isWsFed()" i18n>WS Federation</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <ng-container i18n>Contacts</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Logout</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Access Strategy</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
        <ng-container i18n>Expiration</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Multifactor Authentication</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Proxy Authentication</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Username Attribute</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Attribute Release</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container i18n>Properties</ng-container>
      </ng-template>
    </mat-tab>
    <mat-tab>
      <ng-template mat-tab-label>
          <ng-container>Advanced</ng-container>
      </ng-template>
    </mat-tab>
  </mat-tab-group>
</div>
<div style="position:relative;top:90px;margin-bottom:75px;">
  <router-outlet name="form"></router-outlet>
</div>
